<template>
    <div class="order-detail-container">
        <!-- 导航栏组件 -->
        <TmallNavBar>
            <template #left v-if="$route.query.referer == undefined"><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>订单详情</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 骨架屏 -->
        <van-skeleton v-if="isShowSkeleton">
            <template #template>
                <div class="od-skeleton">
                    <div class="od-skeleton-header">
                        <van-skeleton-image  class="s-image"/>
                    </div>

                    <!-- 地址骨架屏 -->
                    <div class="od-skeleton-address">
                        <van-skeleton-image image-size="20px" />
                        <div class="od-skeleton-item">
                            <van-skeleton-paragraph row-width="50%" class="od-skeleton-text"/>
                            <van-skeleton-paragraph class="od-skeleton-text"/>
                        </div>
                    </div>

                    <!-- 商品骨架屏 -->
                    <div class="od-skeleton-goods" v-for="(item) in 2" :key="item">
                        <van-skeleton-image />
                        <div class="od-skeleton-item">
                            <van-skeleton-paragraph class="od-skeleton-text" v-for="(item) in 3" :key="item"/>
                        </div>
                    </div>

                    <van-skeleton-paragraph style="height: 2px;margin: 25px 0;"/>

                    <div class="od-skeleton-price">
                        <div class="od-skeleton-price-item" v-for="(item) in 3" :key="item">
                            <van-skeleton-paragraph row-width="30%"/>
                            <van-skeleton-paragraph row-width="20%"/>
                        </div>
                    </div>
                    <div class="od-skeleton-detail">
                        <van-skeleton-paragraph class="od-skeleton-detail-item" style="height: 30px;" row-width="30%"/>
                        <van-skeleton-paragraph class="od-skeleton-detail-item" row-width="45%"/>
                        <van-skeleton-paragraph class="od-skeleton-detail-item" row-width="70%"/>
                    </div>
                </div>
            </template>
        </van-skeleton>

        <!-- 订单详情 -->
        <div class="order-detail-main" v-if="orderInfo.oid">
            <!-- 订单状态 -->
            <div class="order-status">
                <!-- 待付款状态:展示去支付按钮和倒计时 -->
                <template v-if="orderInfo.status == 0">
                    <div @click="onOrderPay(orderInfo.oid)" class="status iconfont icon-daifukuan">待付款</div>
                    <div class="tips">
                        <span class="money">应付金额: ¥ {{ (orderInfo.pay_money/100).toFixed(2) }}</span>
                        <span class="time">支付剩余</span>
                        <van-count-down
                            :time="orderInfo.expire_time * 1000"
                            format="mm 分 ss 秒"
                            @finish="onTimeup"
                        />
                    </div>
                    <div class="pay-btn-box">
                        <div @click="onOrderPay(orderInfo.oid)" class="button">去支付</div>
                    </div>
                </template>

                <!-- 其他订单状态:展示再次购买按钮 -->
                <template v-else>
                    <!-- 订单状态文字 -->
                    <template v-for="(item, index) in statusItems" :key="index">
                        <div class="status-box" v-if="item.value == orderInfo.status">
                            <span class="status-icon" :class="`iconfont ${item.icon_name}`"></span>
                            <span class="status" > {{ item.value_txt }} </span>
                        </div>
                    </template>
                    <div class="button-group">
                        <van-button v-if="[3,4,5].includes(orderInfo.status)" class="button" @click="handleConfirmOrder(orderInfo.oid)">确认收货</van-button>

                        <van-button v-if="orderInfo.status == 6 && orderInfo.orderItems.length == 1" class="button" @click="handleShowCommentPopup(orderInfo.orderItems[0])">评价</van-button>

                        <van-button v-if="orderInfo.status == 7 && orderInfo.orderItems.length == 1" class="button" @click="handleShowCommentPopup(orderInfo.orderItems[0])">追加评价</van-button>

                        <van-button v-if="[1,2].includes(orderInfo.status)" class="button" @click="handleRefundOrder(orderInfo.oid)">退款</van-button>
                    </div>
                </template>
            </div>

            <!-- 配送状态 -->
            <div class="shipment">
                <!-- 订单物流信息 -->
                <template v-for="(item,index) in orderLogistics" :key="item.id">
                    <div v-if="index== 0" class="item">
                        <div class="message">{{item.message}}</div>
                        <div class="date"> {{ item.create_time }} </div>
                    </div>
                    <div v-if="index== 0" class="more">
                        <span @click="moreOrderLogistics">查看更多物流信息</span>
                    </div>
                </template>


                <!-- 用户收货地址 -->
                <div class="delivery-address-box">
                    <div class="icon">
                        <van-icon color="#27BA9B" name="location" />
                    </div>
                    <div class="delivery-address">
                        <div class="user">
                            {{ ordeDeliveryAddr.name }} {{ ordeDeliveryAddr.mobile }} 
                        </div>
                        <div class="address"> 
                            {{ ordeDeliveryAddr.region }} {{ ordeDeliveryAddr.address }} 
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="order-goods">
                <div class="item">
                    <div class="navigator"
                        v-for="item in orderInfo.orderItems"
                        :key="item.goods_id"
                        @click="$router.push('/goodsDetail?goods_id='+item.goods_id)"
                    >
                        <van-image class="cover" :src="global.MINIO_FILE_DOMAIN + item.goods_cover_url" />
                        <div class="meta">
                            <div class="name ellipsis">{{ item.goods_name }}</div>
                            <div class="type">{{ item.goods_sku_text }}</div>
                            <div class="price">
                                <div class="actual">
                                    <span class="symbol">¥</span>
                                    <span>{{ (item.goods_price/100).toFixed(2) }}</span>
                                </div>
                                <div class="goods-num">x{{ item.goods_num }}</div>
                            </div>

                            <div class="comment-btn-box" v-if="[6].includes(item.status) && orderInfo.orderItems.length > 1">
                                <van-button 
                                    @click.stop="handleShowCommentPopup(item)"
                                    size="mini"
                                    style="width: 30%;margin-top: 10px;"
                                    color="#27BA9B"
                                >评价</van-button>
                            </div>

                            <div class="comment-btn-box" v-if="[7].includes(orderInfo.status) && orderInfo.orderItems.length > 1">
                                <van-button 
                                    @click.stop="handleShowCommentPopup(item)"
                                    size="mini"
                                    style="width: 30%;margin-top: 10px;"
                                    color="#27BA9B"
                                >追加评价</van-button>
                            </div>
                        </div>
                    </div>
                    <!-- 待评价状态:展示按钮 -->
                    <div class="action" v-if="orderInfo.status == 6 && orderInfo.orderItems.length == 1">
                        <div class="button primary" @click="handleAftersales(orderInfo.oid)">申请售后</div>
                    </div>
                </div>


                <!-- 合计 -->
                <div class="total">
                    <div class="row">
                        <div class="text">商品总价: </div>
                        <div class="symbol">{{ (orderInfo.order_money/100).toFixed(2) }}</div>
                    </div>
                    <div class="row">
                        <div class="text">运费: </div>
                        <div>免费包邮</div>
                    </div>
                    <div class="row">
                        <div class="text">应付金额: </div>
                        <div class="symbol primary">{{ (orderInfo.pay_money/100).toFixed(2) }}</div>
                    </div>
                    <div class="row" v-if="[-2,8].includes(orderInfo.status)">
                        <div class="text">退款金额: </div>
                        <div class="symbol primary">{{ (orderInfo.pay_money/100).toFixed(2) }}</div>
                    </div>
                </div>
            </div>

            <!-- 订单信息 -->
            <div class="order-detail">
                <div class="order-title">订单信息</div>
                <div class="row">
                <div class="item">
                    订单编号: {{ $route.query.oid }}
                    <text class="copy">复制</text>
                </div>
                <div class="item">下单时间: {{ orderInfo.create_time }}</div>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div class="toolbar-height"></div>
            <div class="toolbar">
                <!-- 待付款状态:展示支付按钮 -->
                <template v-if="orderInfo.status == 0">
                    <div @click="onOrderPay(orderInfo.oid)" class="button primary"> 去支付 </div>
                    <div class="button" @click="showCancelOrder(orderInfo.oid)"> 取消订单 </div>
                </template>

                <!-- 其他订单状态:按需展示按钮 -->
                <template v-else>
                    <!-- 待发货状态：展示退款按钮 -->
                    <div v-if="[1,2,3,4,5].includes(orderInfo.status)" class="button primary" @click="handleRefundOrder(orderInfo.oid)"> 退款 </div>

                    <!-- 待评价/已完成/已取消/退款中/已退款 状态: 展示删除订单 -->
                    <div v-if="[-2,-1,6,7,8].includes(orderInfo.status)" class="button delete" @click="handleDeleteOrder(orderInfo.oid)"> 删除订单 </div>

                    <div class="button secondary" @click="$router.push({path: '/goodsDetail', query: {goods_id: orderInfo.orderItems[0].goods_id}})"> 再次购买 </div>
                </template>
            </div>
        </div>

        <!-- 取消订单弹窗 -->
        <van-popup
            v-model:show="isShowPopup"
            position="bottom"
            background-color="#fff"
        >
            <div class="popup-root">
                <div class="title">订单取消</div>
                <div class="description">
                <div class="tips">请选择取消订单的原因：</div>
                <div
                    class="cell"
                    v-for="item in reasonList"
                    :key="item"
                    @click="reason = item"
                >
                    <span class="text">{{ item }}</span>
                    <span class="icon iconfont" :class="item === reason ? ' icon-checked icon-xuanzhong' : 'icon-weixuanzhong'"></span>
                </div>
                </div>
                <div class="footer">
                <div class="button" @click="isShowPopup = false">取消</div>
                <div @click="confirmCancelOrder()" class="button primary">确认</div>
                </div>
            </div>
        </van-popup>

        <!-- 评价弹层 -->
        <van-popup
            v-model:show="isShowCommentPopup"
            position="bottom"
            closeable
            background-color="#fff"
        >
            <div class="comment-popup">
                <div class="comment-title">评价商品</div>
                <div class="comment-description">
                    <van-form @submit="onSubmit">
                        <div class="goods-box">
                            <!-- 商品封面 -->
                            <div class="goods-cover-box">
                                <img class="goods-cover" :src="global.MINIO_FILE_DOMAIN + commentGoods.goods_cover_url" />
                            </div>
                            <div class="goods-name-sku-box">
                                <div class="goods-sku">{{ commentGoods.goods_sku_text }}</div>
                                <div class="goods-name ellipsis">{{ commentGoods.goods_name }}</div>
                            </div>
                        </div>

                        <!-- 评价内容 -->
                        <van-cell-group inset>
                            <van-field
                                v-model="formParams.contents"
                                name="评价内容"
                                rows="2"
                                type="textarea"
                                maxlength="100"
                                autosize
                                placeholder="请输入评价内容"
                                show-word-limit
                                :rules="[{ required: true, message: '请输入评价内容' }]"
                            />
                        </van-cell-group>

                        <!-- 上传图片 -->
                        <div class="upload-image-box">
                            <van-uploader v-model="imageList" multiple :max-count="4" :after-read="afterRead"/>
                        </div>

                        <!-- 评分 -->
                        <div class="rate-box" v-if="status == 6">
                            <!-- 综合评价 -->
                            <div class="rate-item">
                                <span class="rate-text">综合评价</span>
                                <van-rate
                                    v-model="formParams.composite_score"
                                    :size="25"
                                    color="#27BA9B"
                                    void-icon="flower-o"
                                    icon="flower-o"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 描述相符 -->
                            <div class="rate-item">
                                <span class="rate-text">描述相符</span>
                                <van-rate
                                    v-model="formParams.conform_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 物流服务 -->
                            <div class="rate-item">
                                <span class="rate-text">物流服务</span>
                                <van-rate
                                    v-model="formParams.logistic_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 服务态度 -->
                            <div class="rate-item">
                                <span class="rate-text">服务态度</span>
                                <van-rate
                                    v-model="formParams.serve_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                        </div>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit" color="#27BA9B">
                            发&nbsp;&nbsp;布
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </van-popup>

    </div>
</template>

<script setup>
import { reqCancelOrderAPI, reqConfirmOrderAPI, reqOrderDetailAPI, reqDeleteOrderAPI, reqPaymentOrderAPI, reqRefundOrderAPI } from '@/apis/order'
import { reqAddGoodsCommentAPI, reqAppendGoodsCommentAPI } from '@/apis/goodsComment'
import { reqUploadImageAPI } from '@/apis/uploadFile'
import { reqMpWxPayAPI } from '@/apis/payment'
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import { ref, inject, onMounted, reactive } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import ClipboardJS from 'clipboard'
import { useUserStore } from '@/store/modules/user'


// ---------------------------- 定义全局变量开始 ----------------------------
// 全局属性
const global = inject('global')

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 显示骨架屏
const isShowSkeleton = ref(false)

// 用户存储
const userStore = useUserStore()

// 来源页面
const from = route.query.from != undefined ? route.query.from : ''
// ---------------------------- 定义全局变量结束 ----------------------------




// ---------------------------- 取消订单功能开始 ----------------------------
// 弹出层组件
const isShowPopup = ref(false)

// 取消原因列表
const reasonList = ref([
    '商品无货',
    '不想要了',
    '商品信息填错了',
    '地址信息填写错误',
    '商品降价',
    '其它',
])

// 订单取消原因
const reason = ref('')

// 订单号
const orderId = ref(0)

// 显示取消订单弹层
const showCancelOrder = (oid) => {
    orderId.value = oid
    isShowPopup.value = true
}

// 确定取消订单
const confirmCancelOrder = async () => {
  // 判断取消原因
  if (reason.value == '') {
    showToast('请选择取消原因!')
    return false
  }

  // 请求
  await reqCancelOrderAPI({oid: orderId.value, cancel_reason: reason.value})
  showSuccessToast('取消成功')
  orderInfo.value.status = -1
  isShowPopup.value = false
}
// ---------------------------- 取消订单功能结束 ----------------------------





// ---------------------------- 确认收货功能开始 ----------------------------
const handleConfirmOrder = (oid) => {
    showConfirmDialog({
	    title:'提示',
        message:'确定要确认收货吗?'
    }).then(async () => {
        await reqConfirmOrderAPI(oid)
        showSuccessToast('确认成功')
        orderInfo.value.status = 6
	})
}
// ---------------------------- 确认收货功能结束 ----------------------------



// ---------------------------- 删除订单功能开始 ----------------------------
const handleDeleteOrder = (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'删除的订单可以在电脑端查看!'
    }).then(async () => {
        await reqDeleteOrderAPI(oid)

        showSuccessToast('删除成功')

        // 判断来源页面
        if (from) {
            router.push({path: '/refundOrder'})
        } else {
            router.push({path: '/orderList', query: {status: 0}})
        }
    }).catch(() => {})
}
// ---------------------------- 删除订单功能结束 ----------------------------



// ---------------------------- 退款订单功能开始 ----------------------------
const handleRefundOrder = (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'确定要退款吗?'
    }).then(async () => {
        await reqRefundOrderAPI(oid)

        showSuccessToast('退款成功')

        orderInfo.value.status = 8
    }).catch(() => {})
}
// ---------------------------- 退款订单功能结束 ----------------------------




// 复制内容
const onCopy = () => {
    const clipboard = new ClipboardJS('.copy', {
        text() {
            return route.query.oid
        }
    })

    clipboard.on('success', () => {
        showToast('已复制到剪贴板！')
    })
}

onMounted( async () => {
    isShowSkeleton.value = true
    await getOrderDetail()
    isShowSkeleton.value = false
    
    onCopy()
})




// ---------------------------- 订单倒计时功能开始 ----------------------------
const onTimeup = () => {
  // 当倒计结束的时候修改订单状态为：已取消
  orderInfo.value.status = -1
}
// ---------------------------- 订单倒计时功能结束 ----------------------------




// ---------------------------- 订单支付功能开始 ----------------------------
const onOrderPay = (oid) => {

    showConfirmDialog({
        title:'提示',
        message:'当前支付功能仅模拟模式?'
    }).then(async () => {
        await reqPaymentOrderAPI(oid)

        showSuccessToast('支付成功')

        // 当currentTab是待付款栏时，需要将该订单从列表中删除
        // if (currentTab.value == 1) {
        //     const index = orderList.value.findIndex((item) => item.oid == oid)
        //     orderList.value.splice(index, 1)
        // } else {
        //     const order = orderList.value.find((item) => item.oid == oid)
        //     order.status = 1
        // }

        setTimeout(() => {
            router.push({path: '/paymentResult', query: {oid}})
        }, 1000)

    }).catch(() => {})
}
// ---------------------------- 订单支付功能结束 ----------------------------




// ---------------------------- 查看物流功能开始 ----------------------------

const moreOrderLogistics = () => {
  
}
// ---------------------------- 查看物流功能结束 ----------------------------



// ---------------------------- 评价商品功能开始 ----------------------------
const commentGoods = ref({})
// 表单参数
const formParams = reactive({
    oid: 0,
    order_item_id: 0,
    goods_id: 0,
    goods_name: '',
    goods_sku_id: 0,
    goods_sku_text: '',
    username: userStore.profile.user.username,
    avatar_url: userStore.profile.user.avatar_url,
    contents: '',
    image_url: '',
    composite_score: 0,
    conform_score: 0,
    logistic_score: 0,
    serve_score: 0,
})

// 图片
const imageList = ref([])

// 是否显示评价弹层
const isShowCommentPopup = ref(false)

// 选择图片之后
const afterRead = async (file) => {
    console.log('file =', file);
    
    // 图片类型限制
	const imageTypes = [
		'image/jpg',
		'image/jpeg',
		'image/png',
	]
	if (!imageTypes.includes(file.file.type)) {
		showToast('图片类型要求：jpeg、jpg、png')
		return false
	}

	// 图片大小限制 2M
	if (file.file.size > 1024 * 1024 * 2) {
		showToast('图片大小不能超过2M')
		return false
	}

    file.status = 'uploading'
    file.message = '上传中...'

    const {data:result} = await reqUploadImageAPI({file: file.file})
    if (result.code != 200) {
        file.status = 'failed'
        file.message = result.message
        return false
    }

    file.status = 'done'
    file.message = '上传完成'
    imageList.value.forEach(item => {
        if (item.objectUrl == file.objectUrl) {
            item.image_url = result.data.image_url
        }
    })
}

const status = ref(0)

// 处理显示评价弹层
const handleShowCommentPopup = (item) => {
    commentGoods.value = item
    formParams.oid = item.oid
    formParams.order_item_id = item.id
    formParams.goods_id = item.goods_id
    formParams.goods_name = item.goods_name
    formParams.goods_sku_id = item.goods_sku_id
    formParams.goods_sku_text = item.goods_sku_text

    status.value = item.status

    // 重置表单数据
    formParams.contents = ''
    formParams.image_url = ''
    formParams.composite_score = 0
    formParams.conform_score = 0
    formParams.logistic_score = 0
    formParams.serve_score = 0
    imageList.value = []

    // 显示评价弹层
    isShowCommentPopup.value = true
}

// 提交评价
const onSubmit = async () => {
    if (status.value == 6) {
        // 提交参数判断
        if (formParams.composite_score == 0) {
            showToast('请选择综合评分')
            return false
        }
        if (formParams.conform_score == 0) {
            showToast('请选择描述相符评分')
            return false
        }
        if (formParams.logistic_score == 0) {
            showToast('请选择物流服务评分')
            return false
        }
        if (formParams.serve_score == 0) {
            showToast('请选择服务态度评分')
            return false
        }
    }

    // 组装图片数据
    let image_url = ''
    if (imageList.value.length > 0) {
        imageList.value.forEach(value => {
            image_url += value.image_url + ','
        });
    }

    formParams.image_url = image_url.substring(0,image_url.length-1)
    if (status.value == 7) {
        formParams.is_append = 1
        // 请求追加评价接口
        await reqAppendGoodsCommentAPI(formParams)
        showSuccessToast('追评成功')
    } else {
        // 请求新增评价接口
        await reqAddGoodsCommentAPI(formParams)
        showSuccessToast('评价成功')


        // 查找订单明细，将其状态设置为：已完成
        orderInfo.value.orderItems.forEach(item => {
            if (item.id == formParams.order_item_id) {
                item.status = 7
            }
        })

        // 判断该订单是否存在未评价的商品
        let flag = false
        orderInfo.value.orderItems.forEach(item => {
            if (item.status == 6) {
                flag = true
            }
        })

        if (!flag) {
            orderInfo.value.status = 7
        }
    }

    isShowCommentPopup.value = false
}
// ---------------------------- 评价商品功能开始 ----------------------------



// ---------------------------- 申请售后功能开始 ----------------------------
const handleAftersales = (oid) => {
    showToast('暂未开通此功能')
}
// ---------------------------- 申请售后功能结束 ----------------------------




// ---------------------------- 获取订单详情功能开始 ----------------------------
const orderInfo = ref({})
const statusItems = ref([])
const ordeDeliveryAddr = ref({})
const orderLogistics = ref([])
const getOrderDetail = async () => {
  const result = await reqOrderDetailAPI(route.query.oid, 1)
  orderInfo.value = result.data.order
  statusItems.value = result.data.status_items
  ordeDeliveryAddr.value = result.data.order_delivery_addr
  orderLogistics.value = result.data.order_logistics != null ? result.data.order_logistics : []
}
// ---------------------------- 获取订单详情功能结束 ----------------------------
</script>

<style lang="scss" scoped>
::v-deep .van-skeleton {
  display: block;
}
.od-skeleton {
    display: flex;
    flex-direction: column;

    .od-skeleton-header {
        height: 125px;
        margin-bottom: 5px;
        .s-image {
            width: 100%;
            height: 100%;
        }
    }
    // 地址骨架屏
    .od-skeleton-address {
        display: flex;
        align-items: center;
        padding: 10px;
        .od-skeleton-item {
            flex: 1;
            margin-left: 30px;
            .od-skeleton-text {
                margin-top: 10px;
            }
        }
    }
    // 商品骨架屏
    .od-skeleton-goods {
        display: flex;
        align-items: center;
        padding-top: 10px;
        .od-skeleton-item {
            flex: 1;
            margin-left: 30px;
            .od-skeleton-text {
                margin-top: 10px;
            }
        }
    }

    // 价格
    .od-skeleton-price {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        .od-skeleton-price-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    }

    // 信息
    .od-skeleton-detail {
        .od-skeleton-detail-item {
            margin-bottom: 10px;
        }
    }
}
.order-detail-container {
    margin-top: 45.1px;
    background-color: ghostwhite;
    margin-bottom: 2px;
    .order-detail-main {
        .order-status {
            display: flex;
            flex-direction: column;
            align-items: center;

            line-height: 1;
            margin: 15px 0;
            padding-top: 10px;
            color: #fff;
            background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
            background-size: cover;

            .status-box {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                padding-top: 25px;
                .status-icon {
                    font-size: 25px;
                }

                .status {
                    font-size: 12px;
                    margin-left: 7px;
                }
            }

            .tips {
                margin: 15px 0;
                display: flex;
                font-size: 14px;
                align-items: center;

                .money {
                    margin-right: 15px;
                }
            }
            .pay-btn-box {
                padding-bottom: 10px;
            }

            .button-group {
                margin-top: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-bottom: 15px;
            }

            .button {
                width: 130px;
                height: 32px;
                margin: 0 5px;
                text-align: center;
                line-height: 32px;
                font-size: 14px;
                color: #27ba9b;
                border-radius: 34px;
                background-color: #fff;
            }

        }
        .shipment {
            line-height: 1.4;
            padding: 0 10px;
            margin: 10px 10px 0;
            border-radius: 5px;
            background-color: #fff;
            .delivery-address-box {
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon {
                    font-size: 30px;
                }
                .delivery-address {
                    padding: 10px;
                    .user {
                        font-size: 13px;
                        color: #444;
                    }

                    .address {
                        font-size: 12px;
                        color: #666;
                    }
                }
            }

            .locate,
            .item {
                min-height: 60px;
                padding: 15px 15px 13px 38px;
                background-size: 25px;
                background-repeat: no-repeat;
                background-position: 3px center;
            }

            .locate {
                .user {
                    font-size: 13px;
                    color: #444;
                }

                .address {
                    font-size: 12px;
                    color: #666;
                }
            }

            .item {
                background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
                border-bottom: 1px solid #eee;
                position: relative;

                .message {
                    font-size:13px;
                    color: #444;
                }

                .date {
                    font-size: 12px;
                    color: #666;
                }
            }
            .more {
                text-align: center;
                margin-bottom: 10px;
            }

        }
        .order-goods {
            margin: 10px 10px 0;
            padding: 0 10px;
            border-radius: 5px;
            background-color: #fff;

            .item {
                padding: 15px 0;
                border-bottom: 1px solid #eee;

                .navigator {
                    display: flex;
                    margin: 10px 0;
                }

                .cover {
                    width: 85px;
                    height: 85px;
                    border-radius: 5px;
                    margin-right: 10px;
                }

                .meta {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: relative;
                    .comment-btn-box {
                        display: flex;
                        justify-content: flex-end;
                    }
                }

                .name {
                    height: 30px;
                    font-size: 13px;
                    color: #444;
                }

                .type {
                    line-height: 1.8;
                    padding: 0 8px;
                    margin-top: 3px;
                    font-size: 12px;
                    align-self: flex-start;
                    border-radius: 2px;
                    color: #888;
                    background-color: #f7f7f8;
                }

                .price {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 3px;
                    font-size: 12px;
                }

                .symbol {
                    font-size: 10px;
                }

                .original {
                    color: #999;
                    text-decoration: line-through;
                }

                .actual {
                    margin-left: 5px;
                    color: #444;
                }

                .text {
                    font-size: 12px;
                }

                .quantity {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    font-size: 12px;
                    color: #444;
                }

                .action {
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: flex-start;
                    padding: 15px 0 0;

                    .button {
                        width: 100px;
                        height: 30px;
                        text-align: center;
                        justify-content: center;
                        line-height: 30px;
                        margin-left: 10px;
                        border-radius: 30px;
                        border: 1px solid #ccc;
                        font-size: 13px;
                        color: #444;
                    }

                    .primary {
                        color: #27ba9b;
                        border-color: #27ba9b;
                    }
                }
            }

            .total {
                line-height: 1;
                font-size: 13px;
                padding: 10px 0;
                color: #666;

                .row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 5px 0;
                }

                .symbol::before {
                    content: '¥';
                    font-size: 80%;
                    margin-right: 2px;
                }

                .primary {
                    color: #cf4444;
                    font-size: 18px;
                }
            }
        }
        .order-detail {
            line-height: 1;
            padding: 15px 10px 0;
            margin: 10px 10px 0;
            font-size: 13px;
            color: #666;
            border-radius: 5px;
            background-color: #fff;
            .order-title {
                font-size: 15px;
                color: #444;
            }

            .row {
                padding: 10px 0;

                .item {
                    padding: 5px 0;
                    display: flex;
                    align-items: center;
                }

                .copy {
                    border-radius: 10px;
                    font-size: 10px;
                    border: 1px solid #ccc;
                    padding: 3px 5px;
                    margin-left: 5px;
                }
            }
        }

        .toolbar-height {
            height: 50px;
            box-sizing: content-box;
        }
        .toolbar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;

            height: 50px;
            padding: 0 10px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            background-color: #fff;
            box-sizing: content-box;

            .button {
                display: flex;
                justify-content: center;
                align-items: center;

                width: 100px;
                height: 36px;
                margin-left: 8px;
                font-size: 13px;
                border-radius: 36px;
                border: 1px solid #ccc;
                color: #444;
            }

            .delete {
                order: 4;
            }

            .button {
                order: 3;
            }

            .secondary {
                order: 2;
                color: #27ba9b;
                border-color: #27ba9b;
            }

            .primary {
                order: 1;
                color: #fff;
                background-color: #27ba9b;
            }
        }
    }
}

.popup-root {
  padding: 15px 15px 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;

  .title {
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .description {
    font-size: 14px;
    padding: 0 10px;

    .tips {
      color: #444;
      margin-bottom: 6px;
    }

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      color: #666;
    }

    .icon {
      font-size: 19px;
      color: #999;
    }

    .icon-checked {
      font-size: 19px;
      color: #27ba9b;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 20px;
    font-size: 14px;
    color: #444;

    .button {
      flex: 1;
      height: 36px;
      text-align: center;
      line-height: 36px;
      margin: 0 10px;
      color: #444;
      border-radius: 36px;
      border: 1px solid #ccc;
    }

    .primary {
      color: #fff;
      background-color: #27ba9b;
      border: none;
    }
  }
}

.comment-popup {
    padding: 15px 0;
    overflow: hidden;
    .comment-title {
        font-size: 15px;
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
    }
    .comment-description {
        font-size: 14px;
        border-top: 0.5px solid gainsboro;
        .goods-box {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            .goods-cover-box {
                width: 70px;
                height: 70px;
                .goods-cover {
                    width: 70px;
                    height: 70px;
                }
            }
            .goods-name-sku-box {
                margin-left: 10px;
                width: 80%;
                .goods-sku {
                    font-weight: bold;
                    margin-bottom: 5px;

                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;

                }
                .goods-name {
                    font-size: 13px;
                }
            }
        }
        .upload-image-box {
            padding: 10px;
        }
        .rate-box {
            padding: 10px;
            .rate-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .rate-text {
                    font-size: 16px;
                    margin-right: 20px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>